<template>
    <view>
        <div class="DataList-add" v-if="button.length!=0" @click.stop="add">
            <i class="iconfont icon-jia"></i>
        </div>
        <!--  更多按钮    -->
        <ul class="DataList-list-button-more" v-if="buttonShow">
            <li v-for="(btn,index) in button" @click="handMethod(btn)">{{ btn.btnLabel }}</li>
            <!--下面三角形-->
            <div class="DataList-list-button-more-iconfont"><i class="iconfont icon-play_fill"></i></div>
        </ul>
    </view>
</template>

<script>
export default {
    name: "FormBoListButton",
    props: {
        mobileButton: {
            type: Array,
            default() {
                return []
            }
        },
        hasMobileAllRight: {
            type: String
        },
        mobileBtnRight: {
            type: Array,
            default() {
                return []
            }
        },
        rows:{
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return {
            buttonShow: false, //是否点击列按钮展示更多
            button: [],
            user:uni.getStorageSync("user")
        }
    },
    mounted() {
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formBoListComponentsLang", key);
        },
        init() {
            this.button = [];
            var ary = this.mobileButton.filter(item => {
                return item.btnType == 'list';
            })
            if (!this.hasMobileAllRight || this.hasMobileAllRight != "YES") {
                ary = ary.filter(item => {
                    if (this.mobileBtnRight && this.mobileBtnRight.length > 0) {
                        return this.mobileBtnRight.includes(item.btnName);
                    }
                })
            }
            if (ary.length == 0) {
                return;
            }
            //显示条件
            ary.filter(res=>{
                let show = this.btnShow(res)
                if(show){
                    this.button.push(res)
                }
            })
        },
        //添加表单
        add() {
            if (this.button.length > 1) {
                this.buttonShow = !this.buttonShow;
            } else if (this.button.length == 1) {
                this.handMethod(this.button[0]);
            }
        },
        handMethod(btn) {
            //在FormBoListPreviewList.vue页面使用
            this.$eventBus.$emit('handMethod', btn, this.item);
        },
        btnShow(btn){
            if(!btn.isSetedShowCondition){
                return true
            }
            let isShow = this.checkRightByDialogButton(btn)
            return  isShow
        },
        /**
         * 根据条件判断按钮是否显示
         * @param {Object} btn 按钮对象
         * @param {Object} row 一行数据对象
         */
        checkRightByDialogButton(btn) {
            if (!btn.btnShow) {
                return true;
            }
            let fn = new Function("rows", "user", "btn", btn.btnShow);
            let rtn = fn(this.rows, this.user, btn);
            return rtn;
        },
    },
    watch:{
        rows:{
            handler:function () {
                this.init()
            },
            deep:true
        }
    }
}
</script>

<style scoped>
.DataList-add {
    width: 2rem;
    height: 2rem;
    background: #2871ff;
    color: white;
    position: fixed;
    right: 2rem;
    bottom: 4rem;
    border-radius: 50%;
    text-align: center;
    line-height: 2rem;
    z-index: 9;
}

.DataList-list-button-more {
    position: fixed;
    z-index: 1;
    min-width: 4rem;
    bottom: 6.5rem;
    right: 1rem;
    border-radius: 5px;
    display: flex;
    flex-direction: column-reverse;
    background-color: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(50, 71, 119, 0.06);
}

.DataList-list-button-more > li {
    background-color: white;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    padding: 0px .5rem;
    border-bottom: 1px solid #e8e8e8;
}

.DataList-list-button-more-iconfont {
    position: absolute;
    bottom: -1rem;
    color: white;
    left: calc(50% - .5rem);
    transform: rotate(90deg);
}

</style>
